Skip to content

feat: add category filtering to commands page sidebar#534

Open
kkonaparthi1 wants to merge 1 commit into
valkey-io:mainfrom
kkonaparthi1:command-category-filter
Open

feat: add category filtering to commands page sidebar#534
kkonaparthi1 wants to merge 1 commit into
valkey-io:mainfrom
kkonaparthi1:command-category-filter

Conversation

@kkonaparthi1
Copy link
Copy Markdown

Fixes #525

Summary

Clicking a command category in the sidebar now filters the page to show only that category's commands, instead of just scrolling to the heading while all 200+ commands remain visible.

Changes

  • Added hashchange event listener that hides all command groups except the selected one
  • Added active state styling on the selected sidebar link
  • Added "Show All" option to restore the full command list
  • Clears search box when filtering by category
  • Filters on initial page load if URL contains a hash

Approach

Follows the same show/hide pattern already used by the existing searchCommands() function. ~30 lines of JavaScript + 5 lines of SCSS.

Clicking a command category in the sidebar now hides all other
command groups, showing only the selected category. Previously,
clicking a category only scrolled to the heading while all 200+
commands across 20+ groups remained visible.

Changes:
- Add hashchange event listener that filters command groups
- Add active state styling on the selected sidebar link
- Add 'Show All' option to restore the full command list
- Clear search box when filtering by category
- Filter on initial page load if URL contains a hash

Follows the same show/hide pattern used by the existing
searchCommands() function.

Fixes valkey-io#525

Signed-off-by: Karthik Konaparthi <konapk@amazon.com>
Copy link
Copy Markdown
Member

@stockholmux stockholmux left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Really nice work! A few little UX tweaks needed to make it easily usable.

Comment thread templates/commands.html
{% block related_content %}
<h2 id="top">Command Categories</h2>
<ul>
<li><a href="#top" class="show-all-link active" onclick="window.location.hash='top';">Show All</a></li>
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The 'Show all' button is active when you don't have any filtering, which is kind of confusing.

Here I'm not filtering, so I'd expect "Show all" to be hidden.
Image

Comment thread templates/commands.html
{% for command_group_name, group_description in group_descriptions %}
{% set replaced_group_id = command_group_name | replace(from="-", to="_") %}
{% if grouped[replaced_group_id] %}<li> <a href="#{{ command_group_name }}">{{ group_description.display }}</a></li>{% endif %}
{% if grouped[replaced_group_id] %}<li> <a href="#{{ command_group_name }}" class="category-link">{{ group_description.display }}</a></li>{% endif %}
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would probably make sense to have some sort of indication that you're filtering above the search bar.

For example: "Show only Search commands."

Image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Command reference category links should filter, not just scroll

2 participants